<template>
  <div class="topic-page" v-if="info.topicId">
    <div class="col-layout">
      <div class="title">{{ info.title }}</div>
      <div class="topic-baseinfo">
        <div class="statis" v-if="info.statis">
          <span v-if="info.statis.followCnt">{{ info.statis.followCnt }} 关注</span>
          <span v-if="info.statis.opinionCnt">{{ info.statis.opinionCnt }} 个观点</span>
          <span v-if="info.statis.viewCnt">{{ info.statis.viewCnt }} 阅读</span>
        </div>
        <div class="flex-align" v-if="info.user">
          <img class="avatar" :src="info.user.avatar" />
          <div class="nickname">{{ info.user.nickname }}</div>
        </div>
      </div>
      <div class="intro">
        <p class="triple-line-ellipsis">
          {{ info.content }}
        </p>
        <!-- <span class="full-text">展开</span> -->
      </div>
      <div class="action">
        <div class="flex-align" v-app-jump="{ to: `mtjimu://topic?id=${id}` }">
          <img src="../../assets/images/icon-invite.png" />
          邀请发表
        </div>
        <div class="line"></div>
        <div class="flex-align" v-app-jump="{ to: `mtjimu://topic?id=${id}` }">
          <img src="../../assets/images/icon-pen-gray.png" />
          发表观点
        </div>
        <div class="line"></div>
        <div class="flex-align" v-app-jump="{ to: `mtjimu://topic?id=${id}` }">
          <img src="../../assets/images/icon-plus-gray.png" />
          关注话题
        </div>
      </div>
    </div>
    <div class="gap-rect"></div>
    <div class="opinion-list">
      <opinion-item
        class="opinion-item"
        v-for="item in opinionList.rows"
        :key="item.opinionId"
        :item="item"
        :id="id"
      ></opinion-item>
      <div v-if="!opinionList.rows || !opinionList.rows.length" class="empty">
        <img src="../../assets/images/topic-empty.png" />
        <p>期待你的精彩观点！</p>
      </div>
    </div>
    <button class="open-app" v-app-jump="{ to: `mtjimu://topic?id=${id}` }">
      打开积幕查看更多
    </button>
  </div>
</template>

<script>
  import qs from 'qs';
  import OpinionItem from './OpinionItem.vue';
  export default {
    data() {
      return {
        info: {},
        opinionList: {},
      };
    },
    components: {
      OpinionItem,
    },
    watch: {
      $route() {},
    },
    created() {
      document.title = '话题详情';
    },
    computed: {
      id() {
        const { id } = qs.parse(window.location.search.replace(/^\?/, ''));
        return id;
      },
    },
    mounted() {
      this.getTopicInfo();
    },
    methods: {
      getTopicInfo() {
        this.$service
          .SquareTopicInfo({
            topicId: this.id,
          })
          .then((res) => {
            this.info = res;
            document.title = res.title;
            wx.ready(() => {
              this.$setShareInfo(res.inviteInfo);
            });
            this.getOpinion();
          })
          .catch((err) => {
            console.log(err);
          });
      },
      getOpinion() {
        window.$JMRegisteredFunc['jm:setTheme']({ dark: 0 });
        this.$service
          .SquareTopicOpinionList({ topicId: this.id, size: 6 })
          .then((res) => {
            this.opinionList = res;
            const r = res.rows || [];
            r.map((item) => {
              this.$nextTick(() => {
                this.fetchCommentList(item);
              });
            });
          })
          .catch((err) => {});
      },
      fetchCommentList(item) {
        this.$service
          .CmCommentList({
            page: 1,
            size: 3,
            subjectId: item.opinionId,
            subjectType: 6, // 1-视频(v),2-文章(a),3-图片(p),4-素材(m),5-话题(t), 6-观点(o)
          })
          .then((res) => {
            this.$set(item, 'commentList', res.rows);
          })
          .catch((err) => {});
      },
      toShare() {},
    },
  };
</script>

<style lang="less">
  .topic-page {
    min-height: 100vh;
    background: var(--themeColor);
    padding: 4rem 0 10rem;
    .col-layout {
      margin-right: 4rem;
      margin-left: 4rem;
    }
    .title {
      font-size: 4rem;
      font-weight: 800;
      color: #cccccc;
      line-height: 5.3rem;
    }
    .topic-baseinfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2rem auto;
      .statis {
        span {
          font-size: 2.4rem;
          color: #888888;
          margin-right: 3rem;
        }
      }
      .avatar {
        width: 4.7rem;
        height: 4.7rem;
        border-radius: 50%;
      }
      .nickname {
        margin-left: 1.8rem;
        font-size: 2.4rem;
        font-weight: 800;
        color: #cccccc;
      }
    }
    .intro {
      font-size: 2.8rem;
      color: #cccccc;
      line-height: 4.6rem;
      position: relative;
      .full-text {
        color: #888888;
        background-image: url('../../assets/images/icon-arrow-down.png');
        background-position: center right;
        background-repeat: no-repeat;
        background-size: 2.4rem;
        padding-right: 3rem;
        position: absolute;
        right: 2rem;
        bottom: 0;
        background-color: #111111;
      }
    }
    .action {
      display: flex;
      justify-content: space-around;
      margin: 4rem auto;
      font-size: 2.8rem;
      color: #cccccc;
      align-items: center;
      img {
        width: 2.6rem;
        height: 2.6rem;
        margin-right: 1rem;
      }
      .line {
        width: 0.2rem;
        height: 2.4rem;
        background: #1b1b1b;
      }
    }
    .comment.action {
      img {
        width: 3.6rem;
        height: 3.6rem;
      }
      font-size: 2.4rem;
      font-weight: 400;
      color: #888888;
    }
    .opinion-list {
      margin-top: 4rem;
      .empty {
        margin-bottom: 10rem;
        img {
          width: 24.5rem;
          height: 24rem;
          margin: 19rem auto 5rem;
        }
        p {
          font-size: 2.8rem;
          font-weight: 400;
          color: #888888;
          text-align: center;
        }
      }
    }
    .open-app {
      background: #1b1b1b;
      width: 67rem;
      height: 9.3rem;
      border-radius: 4.7rem;
      font-size: 2.8rem;
      font-weight: 400;
      color: #cccccc;
      margin: 4rem auto;
    }
    .gap-rect {
      width: 75rem;
      height: 3.3rem;
      background: linear-gradient(0deg, #0b0b0b 1%, #0e0e0e 51%, #0b0b0b 100%);
      opacity: 0.8;
    }
  }
</style>
